<template>
  <div class="content-box" v-if="data">
    <div class="scores-list no-scrollbar scroll-x">
      <template v-for="(value, key, index) of data" :key="index">
        <div
          v-if="getScoreClass(value) !== 'none'"
          class="score-item"
          :class="getScoreClass(value)"
        >
          <div class="score" v-if="getScoreClass(value) == 'pass'">
            {{ $t("tag.pass") }}
          </div>
          <div class="score" v-if="getScoreClass(value) == 'flunk'">
            {{ $t("tag.fail") }}
          </div>
          <div class="text">{{ key }}</div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
type Props = {
  data: Object | undefined;
};

const props = defineProps<Props>();

// 根据成绩值返回相应的CSS类
const getScoreClass = (value) => {
  if (isNaN(parseInt(value)) || parseInt(value) < 0) {
    return "none"; // 无成绩状态
  } else if (value >= 75) {
    return "pass"; // 及格状态
  } else {
    return "flunk"; // 不及格状态
  }
};
</script>
<style scoped lang="less">
@import url("~/pages/new_profile/index/common.less");
// 成绩展示
.scores-list {
  display: flex;
  gap: 24px;
  padding: 8px 4px;
  flex-wrap: wrap;
  &.scroll-x {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .score-item {
    min-width: 100px;
    padding: 16px;
    border-radius: 12px;
    transition: all 0.3s ease;
    text-align: center;

    .score {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .text {
      font-size: 14px;
      color: var(--text-secondary, #666);
      white-space: nowrap;
      max-width: none;
    }
    /* 及格状态 */
    &.pass {
      background-color: var(--success-bg, #e8f5e9); /* 背景颜色 */
      
    }
    &.none {
      opacity: 0.5;
      background-color: var(--disabled-bg, #f5f5f5);
    }

    &.flunk {
      background-color: var(--error-bg, #ffebee);
    }

    &:hover {
      transform: scale(1.02);
    }
  }
}

@media screen and (max-width: 768px) {
  .scores-list {
    flex-wrap: nowrap;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 80px !important;

    .score-item {
      min-width: auto;
      padding: 60px;
      border-radius: 40px;

      .score {
        font-size: 20px;
      }

      .text {
        font-size: 64px;
      }
    }
  }
}
</style>
